<template>
  <div class="recommend-wrapper" ref='recommendWrapper'>
    <scroll ref='scroll' v-if="discList.length&&sliderList.length">
      <div>
       <slider v-if='sliderList.length' :sliderList='sliderList'>
        <ul>
          <li v-for='item in sliderList'>
            <a :href="item.linkUrl">
              <img :src="item.picUrl" @load='refresh' alt="轮播图片">
            </a>
          </li>
        </ul>
      </slider>
      <div class="recommend-list-wrapper">
       <div class="title">热门歌单推荐</div>
       <div class="recommend-list">
        <ul class="list">
          <li class="item" @click="selectItem(item)"  v-for='item in discList'>
            <img class='avatar' v-lazy="item.imgurl" alt="单曲图片" width="60" height="60">
            <div class='info'>
              <h2 class="info-title" v-html='item.creator.name'></h2>
              <div class="info-desc" v-html='item.dissname'></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</scroll>
<div class="loading-wrapper" v-if='discList.length === 0'>
  <loading></loading>
</div>
 <router-view></router-view>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
import Slider from '@/base/slider';
import Scroll from '@/base/scroll';
import { getSliderList, getDiscList } from '@/api/recommend';
import loading from '@/base/loading';
import { playlistMixin } from '@/common/js/mixin';

const PLAYER_HEIGHT = 60;

export default {
  name: 'recommend',
  components: {
    Slider,
    Scroll,
    loading,
  },
  data() {
    return {
      sliderList: [],
      discList: [],
    };
  },
  methods: {
    // todo
    // mixin
    handlePlayList(list) {
      if (list.length > 0) {
        this.$refs.recommendWrapper.style.bottom = `${PLAYER_HEIGHT}px`;
      } else {
        this.$refs.recommendWrapper.style.bottom = 0;
      }
      this.$refs.scroll && this.$refs.scroll.refresh();
    },
    selectItem(item) {
      this.$router.push({
        path: `/recommend/${item.dissid}`,
      });
      this.SET_DISC(item);
    },
    refresh() {
      // load = false;
      if (!this.loaded) {
        this.loaded = true;
        // 只需要一次
        this.$refs.scroll.refresh();
      }
    },
    _getSliderList() {
      getSliderList().then((res) => {
        this.sliderList = res.slider;
      });
    },
    _getDiscList() {
      getDiscList().then((res) => {
        this.discList = res.list;
      });
    },
    ...mapMutations(['SET_DISC']),
  },
  created() {
    this._getSliderList();
    this._getDiscList();
  },
  mixins: [playlistMixin],
};
</script>
<style lang='stylus' scoped>
@import "~styl/var"
@import "~styl/mixin"
.recommend-wrapper
  position fixed
  overflow hidden
  width 100%
  bottom 0
  top 87px
  background $color-background
	.recommend-list-wrapper
    display flex
    flex-direction column
    height 100%
    .title
      height 65px
      line-height 65px
      color $color-theme
      font-size $font-size-medium
      text-align center
    .recommend-list
      flex 1
      .list
        .item
          padding 0 20px 20px 20px
          display flex
          .avatar
            flex-basis 60px
            margin-right 20px
          .info
            flex 1
            display flex
            flex-direction column
            justify-content center
            line-height 20px
            font-size $font-size-medium
            ellipsis()
            .info-title
              margin-bottom 10px
            .info-desc
              ellipsis()
              color $color-text-d
</style>
